<template>
  <div class="win8-layout">
    <!-- Windows 8 Charms Bar -->
    <div class="charms-bar" :class="{ visible: showCharms }">
      <div class="charms-item" @click="toggleSettings">
        <el-icon :size="24"><Setting /></el-icon>
        <span>设置</span>
      </div>
      <div class="charms-item" @click="toggleShare">
        <el-icon :size="24"><Share /></el-icon>
        <span>共享</span>
      </div>
      <div class="charms-item" @click="toggleStart">
        <el-icon :size="24"><HomeFilled /></el-icon>
        <span>开始</span>
      </div>
      <div class="charms-item" @click="toggleSearch">
        <el-icon :size="24"><Search /></el-icon>
        <span>搜索</span>
      </div>
      <div class="charms-item" @click="toggleUserMenu">
        <el-icon :size="24"><UserFilled /></el-icon>
        <span>用户</span>
      </div>
    </div>

    <!-- Windows 8 开始屏幕 -->
    <transition name="start-screen">
      <div v-if="showStartScreen" class="start-screen">
        <div class="start-screen-header">
          <h1 class="start-title">Big ERP</h1>
          <div class="user-info">
            <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <span class="username">管理员</span>
          </div>
        </div>

        <div class="tiles-container">
          <!-- 大磁贴 -->
          <div class="tile-group">
            <div class="tile large-tile" @click="navigateTo('/dashboard')">
              <div class="tile-background dashboard-bg">
                <div class="tile-content">
                  <el-icon :size="48"><HomeFilled /></el-icon>
                  <h3>数据概览</h3>
                  <p>实时监控业务数据</p>
                </div>
              </div>
            </div>

            <div class="tile medium-tile" @click="navigateTo('/sales')">
              <div class="tile-background sales-bg">
                <div class="tile-content">
                  <el-icon :size="32"><ShoppingCart /></el-icon>
                  <h4>销售管理</h4>
                </div>
              </div>
            </div>

            <div class="tile medium-tile" @click="navigateTo('/inventory')">
              <div class="tile-background inventory-bg">
                <div class="tile-content">
                  <el-icon :size="32"><Box /></el-icon>
                  <h4>库存管理</h4>
                </div>
              </div>
            </div>
          </div>

          <!-- 小磁贴组 -->
          <div class="tile-group">
            <div class="tile small-tile" @click="navigateTo('/finance')">
              <div class="tile-background finance-bg">
                <div class="tile-content">
                  <el-icon :size="24"><Money /></el-icon>
                  <span>财务</span>
                </div>
              </div>
            </div>

            <div class="tile small-tile" @click="navigateTo('/member')">
              <div class="tile-background member-bg">
                <div class="tile-content">
                  <el-icon :size="24"><UserFilled /></el-icon>
                  <span>会员</span>
                </div>
              </div>
            </div>

            <div class="tile small-tile" @click="navigateTo('/reports')">
              <div class="tile-background reports-bg">
                <div class="tile-content">
                  <el-icon :size="24"><DataBoard /></el-icon>
                  <span>报表</span>
                </div>
              </div>
            </div>

            <div class="tile small-tile" @click="navigateTo('/cockpit')">
              <div class="tile-background cockpit-bg">
                <div class="tile-content">
                  <el-icon :size="24"><TrendCharts /></el-icon>
                  <span>驾驶舱</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 更多磁贴 -->
          <div class="tile-group">
            <div class="tile small-tile" @click="navigateTo('/office')">
              <div class="tile-background office-bg">
                <div class="tile-content">
                  <el-icon :size="24"><Document /></el-icon>
                  <span>办公</span>
                </div>
              </div>
            </div>

            <div class="tile small-tile" @click="navigateTo('/learning')">
              <div class="tile-background learning-bg">
                <div class="tile-content">
                  <el-icon :size="24"><Calendar /></el-icon>
                  <span>学习</span>
                </div>
              </div>
            </div>

            <div class="tile small-tile" @click="navigateTo('/extensions')">
              <div class="tile-background extensions-bg">
                <div class="tile-content">
                  <el-icon :size="24"><Suitcase /></el-icon>
                  <span>扩展</span>
                </div>
              </div>
            </div>

            <div class="tile small-tile" @click="navigateTo('/system')">
              <div class="tile-background system-bg">
                <div class="tile-content">
                  <el-icon :size="24"><Setting /></el-icon>
                  <span>系统</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 应用列表 -->
        <div class="apps-list">
          <div class="apps-section">
            <h3>所有应用</h3>
            <div class="apps-grid">
              <div
                v-for="app in allApps"
                :key="app.path"
                class="app-item"
                @click="navigateTo(app.path)"
              >
                <div class="app-icon" :style="{ background: app.color }">
                  <el-icon :size="20">
                    <component :is="app.icon" />
                  </el-icon>
                </div>
                <span class="app-name">{{ app.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 主应用界面 -->
    <div class="app-view" :class="{ hidden: showStartScreen }">
      <!-- 顶部应用栏 -->
      <div class="app-bar">
        <div class="app-bar-left">
          <button class="app-button" @click="showStartScreen = true">
            <el-icon :size="20"><HomeFilled /></el-icon>
          </button>
          <div class="app-title">{{ currentAppTitle }}</div>
        </div>
        <div class="app-bar-right">
          <button class="app-button" @click="toggleCharms">
            <el-icon :size="20"><More /></el-icon>
          </button>
          <button class="app-button" @click="minimizeApp">
            <el-icon :size="20"><Minus /></el-icon>
          </button>
          <button class="app-button close-button" @click="closeApp">
            <el-icon :size="20"><Close /></el-icon>
          </button>
        </div>
      </div>

      <!-- 主内容区 -->
      <main class="main-content">
        <router-view v-slot="{ Component }">
          <transition name="app-fade" mode="out-in">
            <component :is="Component" :key="$route.fullPath" />
          </transition>
        </router-view>
      </main>
    </div>

    <!-- 遮罩层 -->
    <div v-if="showStartScreen" class="start-screen-overlay" @click="showStartScreen = false"></div>

    <!-- 用户菜单 -->
    <el-dropdown
      ref="userDropdown"
      trigger="click"
      @command="handleUserCommand"
      :hide-on-click="true"
    >
      <span></span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="profile">个人中心</el-dropdown-item>
          <el-dropdown-item command="settings">系统设置</el-dropdown-item>
          <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ref, computed, markRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import {
  Setting, Share, HomeFilled, Search, UserFilled, ShoppingCart, Box,
  Money, DataBoard, TrendCharts, Document, Calendar, Suitcase,
  More, Minus, Close
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

const showStartScreen = ref(true)
const showCharms = ref(false)
const userDropdown = ref(null)

// 所有应用
const allApps = ref([
  {
    path: '/dashboard',
    title: '首页',
    icon: markRaw(HomeFilled),
    color: '#0078d4'
  },
  {
    path: '/sales',
    title: '销售管理',
    icon: markRaw(ShoppingCart),
    color: '#107c10'
  },
  {
    path: '/inventory',
    title: '库存管理',
    icon: markRaw(Box),
    color: '#d13438'
  },
  {
    path: '/finance',
    title: '财务管理',
    icon: markRaw(Money),
    color: '#ff8c00'
  },
  {
    path: '/member',
    title: '会员管理',
    icon: markRaw(UserFilled),
    color: '#8764b8'
  },
  {
    path: '/reports',
    title: '报表中心',
    icon: markRaw(DataBoard),
    color: '#00bcf2'
  },
  {
    path: '/cockpit',
    title: '数据驾驶舱',
    icon: markRaw(TrendCharts),
    color: '#6c757d'
  },
  {
    path: '/office',
    title: '办公管理',
    icon: markRaw(Document),
    color: '#20c997'
  },
  {
    path: '/learning',
    title: '学习中心',
    icon: markRaw(Calendar),
    color: '#e83e8c'
  },
  {
    path: '/extensions',
    title: '扩展中心',
    icon: markRaw(Suitcase),
    color: '#fd7e14'
  },
  {
    path: '/system',
    title: '系统设置',
    icon: markRaw(Setting),
    color: '#6f42c1'
  }
])

// 当前应用标题
const currentAppTitle = computed(() => {
  const matched = route.matched.filter(item => item.meta && item.meta.title)
  return matched.length > 0 ? matched[matched.length - 1].meta.title : 'Big ERP'
})

const navigateTo = (path) => {
  router.push(path)
  showStartScreen.value = false
}

const toggleStart = () => {
  showStartScreen.value = !showStartScreen.value
  showCharms.value = false
}

const toggleCharms = () => {
  showCharms.value = !showCharms.value
}

const toggleSettings = () => {
  router.push('/system/settings')
  showCharms.value = false
}

const toggleShare = () => {
  ElMessage.info('共享功能')
  showCharms.value = false
}

const toggleSearch = () => {
  ElMessage.info('搜索功能')
  showCharms.value = false
}

const toggleUserMenu = () => {
  userDropdown.value.handleOpen()
  showCharms.value = false
}

const minimizeApp = () => {
  ElMessage.info('最小化应用')
}

const closeApp = () => {
  ElMessage.info('关闭应用')
}

const handleUserCommand = (command) => {
  if (command === 'logout') {
    ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const userStore = useUserStore()
      userStore.logout()
      router.push('/login')
      ElMessage.success('已退出登录')
    }).catch(() => {})
  } else if (command === 'profile') {
    router.push('/system/user-settings')
  } else if (command === 'settings') {
    router.push('/system/settings')
  }
}
</script>

<style scoped>
.win8-layout {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #2d2d30;
  position: relative;
}

/* Charms Bar */
.charms-bar {
  position: fixed;
  right: -200px;
  top: 0;
  width: 200px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  z-index: 2000;
  transition: right 0.3s ease;
}

.charms-bar.visible {
  right: 0;
}

.charms-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  cursor: pointer;
  padding: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  min-width: 80px;
}

.charms-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.charms-item .el-icon {
  margin-bottom: 8px;
}

.charms-item span {
  font-size: 14px;
  font-weight: 500;
}

/* 开始屏幕 */
.start-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 1500;
  overflow-y: auto;
  padding: 40px;
}

.start-screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.start-title {
  font-size: 48px;
  font-weight: 300;
  color: white;
  margin: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
}

.username {
  font-size: 18px;
  font-weight: 500;
}

.tiles-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 40px;
}

.tile-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.tile {
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.tile:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.large-tile {
  width: 310px;
  height: 310px;
}

.medium-tile {
  width: 150px;
  height: 150px;
}

.small-tile {
  width: 150px;
  height: 150px;
}

.tile-background {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.dashboard-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.sales-bg {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.inventory-bg {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.finance-bg {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.member-bg {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.reports-bg {
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.cockpit-bg {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.office-bg {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.learning-bg {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.extensions-bg {
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.system-bg {
  background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%);
}

.tile-content {
  text-align: center;
  color: white;
  padding: 20px;
}

.tile-content h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 16px 0 8px 0;
}

.tile-content h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 8px 0;
}

.tile-content p {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;
}

.tile-content span {
  font-size: 16px;
  font-weight: 500;
  margin-top: 8px;
  display: block;
}

/* 应用列表 */
.apps-list {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 24px;
}

.apps-section h3 {
  color: white;
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 16px 0;
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.app-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.app-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.app-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 12px;
}

.app-name {
  font-size: 14px;
  font-weight: 500;
}

/* 应用视图 */
.app-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  transition: all 0.3s ease;
}

.app-view.hidden {
  opacity: 0;
  pointer-events: none;
}

.app-bar {
  height: 48px;
  background: #2d2d30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: white;
}

.app-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.app-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.close-button:hover {
  background: #e81123;
}

.app-title {
  font-size: 14px;
  font-weight: 500;
}

.app-bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.main-content {
  height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 24px;
  background: #f5f5f5;
}

.start-screen-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1400;
}

/* 动画 */
.start-screen-enter-active,
.start-screen-leave-active {
  transition: all 0.5s ease;
}

.start-screen-enter-from {
  opacity: 0;
  transform: translateX(-100%);
}

.start-screen-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.app-fade-enter-active,
.app-fade-leave-active {
  transition: all 0.3s ease;
}

.app-fade-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.app-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 响应式 */
@media (max-width: 768px) {
  .start-screen {
    padding: 20px;
  }
  
  .start-title {
    font-size: 32px;
  }
  
  .large-tile {
    width: 100%;
    height: 200px;
  }
  
  .medium-tile,
  .small-tile {
    width: calc(50% - 8px);
    height: 120px;
  }
  
  .tiles-container {
    gap: 16px;
  }
  
  .tile-group {
    gap: 8px;
  }
}
</style>
